<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>移动智能门禁系统--开门记录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/swiper.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/md5.js"></script>
	<style>
		.narrow{
			width: 2.4rem;
			height: 2.4rem;
			background-image: url(image/narrow.png) ;
			background-repeat: no-repeat;
			display: inline-block;
			float: right;
			background-size: 1.6rem;
			background-position: 50%;
		}
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
		}
		.clearfix {
			zoom: 1;
		}
		p span{
			border: 2px solid #2B8DF8;
			margin-right: 6px;
		}
		p{
			margin: 0;
			padding: 0;
			line-height: 2.4rem;
			text-align: left;
			background-color: #f0f0f2;
			color: #2b8df8;
			font-size: 17px;
			font-weight: 500;
			padding-left: 4px;
		}
		.table-c table{
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
		}
		.table-c table tr{
			line-height: 2.8rem;
		}
		.table-c table td:nth-child(2n+1){
			width: 30%;
		}
		.table-c table td:nth-child(2n){
			width: 70%;
		}
		.table-c table td{
			text-align: left;
			border-bottom: 1px solid #f0f0f0;
			padding-left: 4px;
			color: #8a8a8a;
		}
		.table-container {
			width: 100%;
		}
		.img-container {
			margin: 0;
			padding: 0;
			width:100%;
			border: none;
			display: block;
			overflow: hidden;
			margin: 2% 0;
		}
		.innerImg{
			width: 30%;
			height: 5rem;
			margin: 0;
			margin-left: 2%;
			background: url(image/tupian.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			border: 1px solid #EBEBEB;
			float: left;
		}
		.innerImg img{
			/*max-width: 100%;*/
			width:100%;
			height: 100%;
		}
		
		.video-container {
			position: relative;
			display: block;
			/*background-image: url(image/play.png) ;
			background-repeat: no-repeat;
			background-position: 50% 30%;*/
		}
		.my-video {
			width: 96%;
			height: 11rem;
			margin: 2% auto;
			background-image: url(image/video.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 30%;
			background-color: rgba(0,0,0,0.3);
		}
		.shade{
			width:100%;
			height:100%;
			background:rgba(0, 0, 0, 0.9);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
			/*display: none;*/
		}
		.layer{
			width: 100%;
			height: 50%;
			background: #fff;
			position: fixed;
			left: 0;
			top: 25%;
			z-index: 999;
			border-radius: 5px;
			/*display: none;*/
		}
		html, body {
			position: relative;
			height: 100%;
		}
		body {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			color:#000;
			margin: 0;
			border: none;
		}
		.swiper-container {
			width: 100%;
			height: 100%;
		}
		.swiper-slide img{
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
		}
		.arrow-status{
			transform:rotate(180deg);
		}
	</style>
</head>
<body>
<div class="table-container table-c">
	<p class="menber clearfix" id="menberTitle"><span></span>人员信息<a class="narrow arrow-status" state="close"></a></p>
	<table class="title" id="menberList" style="display: none;">
		<tr>
			<td>姓名：</td>
			<td id = "name"></td>
		</tr>
		<tr>
			<td>手机号码：</td>
			<td id = "user_mobile"></td>
		</tr>
	</table>

	<p class="menber clearfix" id="cardTitle"><span></span>刷卡信息<a class="narrow arrow-status" state="close"></a></p>
	<table class="title" id="cardList" style="display: none;">
		<tr>
			<td>房屋地址：</td>
			<td id = "house_address"></td>
		</tr>
		<tr>
			<td>刷卡时间：</td>
			<td id = "rec_time"></td>
		</tr>
		<tr>
			<td>门卡类型：</td>
			<td id = "door_card_type"></td>
		</tr>
		<tr>
			<td>开卡类型：</td>
			<td id = "inOutType"></td>
		</tr>
		<tr>
			<td>开门结果：</td>
			<td id = "inOutResult"></td>
		</tr>
		<tr style="display: none;">
			<td>失败描述：</td>
			<td id = "errortDesc"></td>
		</tr>
	</table>
</div>
<div id="imgList" style="display: none;">
	<p class="menber clearfix"><span></span>开门图片<a class="narrow" state="open"></a></p>
	<div class="img-container title" onclick = "openWindow()">
		<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/></div>
		<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/></div>
		<div class="innerImg"><img src="" alt="" data-preview-src="" data-preview-group="1"/></div>
	</div>	
</div>
<div id="videoList" style="display: none;">
	<p class="menber clearfix"><span></span>开门视频<a class="narrow" state="open"></a></p>
	<div class="title">
		<div class="my-video" id="palyVideo">	
									
		</div>
	</div>
</div>
<div id="shadeDiv" class="shade">
</div>

<div id="layerDiv" class="layer">
	<div class="swiper-container">
		<div class="swiper-wrapper">
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function(){
        //图片轮播插件
        var swiper = new Swiper('.swiper-container', {
            // slidesPerView: 1,
            loop: true,
            // loopFillGroupWithBlank: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true//修改swiper的父元素时，自动初始化swiper
        });
        
        //字体初始化
        docEl = document.documentElement;
        var width = docEl.clientWidth>768?768:docEl.clientWidth;
        fontsize = 12 * (width / 320) > 12 ? 12 * (width / 320) : 12;
        docEl.style.fontSize = fontsize + 'px';
        window.onresize = function () {
            docEl = document.documentElement;
            width = docEl.clientWidth>768?768:docEl.clientWidth;
            fontsize = 12 * (width / 320) > 12 ? 12 * (width / 320) : 12;
            docEl.style.fontSize = fontsize + 'px';
        };

        //点击显示与隐藏图标样式切换
        var current = 0;
        $(".menber").click(function(){
            if($(this).children('a').attr('state') === 'open'){
                current = 180;
                $(this).children('a').attr('state','close');
            }else{
                current = 0;
                $(this).children('a').attr('state','open');
            }
            $(this).children('a').css("transform", "rotate(" + current + "deg)");
            $(this).next('.title').toggle();
        });

        //获取请求的内容
        function getRequestContent(){
            var l = location.search.replace(/\?/,"").split("&");
            var o = {};
            for(var i = 0 ; i < l.length; i++){
                var ll = l[i].split("=");
                o[ll[0]] = ll[1];
            }
            return o;
        }
        var o=getRequestContent();
//      o['id'] = 4980;  o['inOutType'] = 1; o['phoneNumber'] = 13580524435;
//		o['host'] = 'https://udacs.gmcciot.com:9527';
		function formatDateTime() { //生成年月日时分秒
			var date = new Date();  
		    var y = date.getFullYear();    
		    var m = date.getMonth() + 1;    
		    m = m < 10 ? ('0' + m) : m;    
		    var d = date.getDate();    
		    d = d < 10 ? ('0' + d) : d;    
		    var h = date.getHours();  
		    h = h < 10 ? ('0' + h) : h;  
		    var minute = date.getMinutes();  
		    var second = date.getSeconds();  
		    minute = minute < 10 ? ('0' + minute) : minute;    
		    second = second < 10 ? ('0' + second) : second;   
		    return y+''+ m +''+d +''+h+''+minute+''+second;    
		};
		
		var key = 'udacs!@#';//固定的key值
		var mobile = o['phoneNumber'];
		var timestamp = formatDateTime();//年月日时分秒
		var token = mobile + timestamp + key;//token的拼接
		var md5 = hex_md5(token);//token的ma5加密
		
		if(o['id'] !== undefined && o['inOutType'] !== undefined && o['phoneNumber'] !== undefined) {
            getVideo(o['id'],o['inOutType']);  //获取开门视频
        }
		
        var doorCardType = {0:'IC卡',1:'身份证',2:'护照'};
		var inOutTypeArr = {0:'刷卡开门',1:'app开门',2:'后台开门',3:'室内按钮开门'};
        function getInAndOutDetail(id,inOutType) {
            $.ajax(o['host']+'/app-api/android/get_rec_detail',{
				data:JSON.stringify({
					"auth":{ 
						"mobile":mobile,
						"token":md5,
						"imei":"imei",
						"imsi":"imsi",
						"timestamp" :timestamp
					},
			   		"api_ver":"1",
					"req":{
						"id": id
					}
				}),
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				contentType: "text/plain; charset=utf-8",
                success: function (data) {
                    $("#name").html(data.resp.name);
                    $("#user_mobile").html(data.resp.user_mobile);
                    $("#house_address").html(data.resp.house_address);
                    $("#rec_time").html(data.resp.rec_time);
                    $("#door_card_type").html(doorCardType[data.resp.door_card_type]);
                    $("#inOutType").html(inOutTypeArr[data.resp.inOutType]);
                    if(data.resp.inOutResult == 0){
                    	$("#inOutResult").html('成功').css('color','blue');
                    }else if(data.resp.inOutResult == 1){
                    	$("#inOutResult").html('失败').css('color','red');
                    	$("#errortDesc").html(data.resp.errortDesc).closest('li').show();
                    }
                  	var imgArr = $(".img-container").find('img');
                    var layerText = '';
                    if(data.resp.imgs.length > 0){
                    	$("#imgList").show();
                    	for(var i=0;i<3;i++){
                    		var src =o['host']+"/app-api/android/getImgRes?mediaId="+data.resp.imgs[i].m_id+"&inOutType="+data.resp.inOutType;
                    		$(imgArr[i]).prop('src',src);
                    	}	                       
                        for(var j = 0;j < data.resp.imgs.length;j++){ //弹出层显示所有图片
                        	var src = o['host']+"/app-api/android/getImgRes?mediaId="+data.resp.imgs[j].m_id+"&inOutType="+data.resp.inOutType;
                        	layerText += '<div class="swiper-slide"><img src="'+src+'"/></div>';
                        }
						$(".swiper-wrapper").empty().append(layerText);
                    }else{
                    	$("#menberTitle").children('a').removeClass('arrow-status').attr('state','open');
	                	$("#cardTitle").children('a').removeClass('arrow-status').attr('state','open');
						$("#menberList").show();
						$("#cardList").show();
                    }
                },
                // 超时处理
                complete: function(XMLHttpRequest,status){
			　　　　if(status=='timeout'){
			 　　　　　 a.abort(); //中断请求
			　　　　　  alert("连接超时，请重新操作！");
			　　　　}
			　　}
            });
        }

        //获取图片
        function getImage(){
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                contentType: 'application/json;charset=UTF-8',
                url: o['host']+'/app-api/android/loadMSPicture',
                data: {
                    'id':o['id']
                },
                jsonp:'callback',
                jsonpCallback:'success_jsonpCallback',
                success: function (data) {
                	var imgArr = $(".img-container").find('img');
                    var text = '', layerText = '';
                    if(o['inOutType'] === '1' || o['inOutType'] === '2'){
                        for(var i = 0;i < 3;i++){ //取前三张图片显示
                            $(imgArr[i]).attr('src',"http://183.232.65.202:8765/putFile/getImgeKey="+data[i]);
                        }
                        for(var j = 0;j < data.length;j++){ //弹出层显示所有图片
                            layerText += '<div class="swiper-slide"><img src="http://183.232.65.202:8765/putFile/getImgeKey'+data[j]+'"/></div>';
                        }
					}else{
                        for(var m = 0;m < 3;m++){ //取前三张图片显示
                            $(imgArr[m]).attr('src',"data:image/png;base64,"+data[m]);
                        }
                        for(var n = 0;n < data.length;n++){ //弹出层显示所有图片
                            layerText += '<div class="swiper-slide"><img src="data:image/png;base64,'+data[n]+'"/></div>';
                        }
					}
                    $(".swiper-wrapper").empty().append(layerText);
                    getInAndOutDetail();
                }
            });
        }

        //获取视频
        var VideoUrl='';
        function getVideo(id,inOutType) {
            var a = $.ajax(o['host']+'/app-api/android/get_rec_video',{
					data:JSON.stringify({
						"auth":{ 
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"id": id
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",
	                success: function (data) {
	                	if(!$.isEmptyObject(data.resp)){ 
	                		VideoUrl = data.resp.video; 
	                		$("#videoList").show();
	                	}
	                	getInAndOutDetail(id,inOutType);  //获取人员信息和刷卡信息
	                },
	                // 超时处理
	                complete: function(XMLHttpRequest,status){
				　　　　if(status=='timeout'){
				 　　　　　 	a.abort(); //中断请求
							mui.toast('连接超时，请重新操作！',{duration:'2000',type:'div'});
				　　　　}
				　　}
	            });
	        }
        //点击视频调用手机播放器播放视频
        $("#palyVideo").click(function(){
//	    	if(VideoUrl==''){
//	    		alert("监控视频不存在");
//	    	}else{
	    		window.android.playVideo(VideoUrl);
//	    	}
	    })
    });
    
    
</script>

<script type="text/javascript">
    var videoHeight;
    var videoDom = document.getElementsByTagName('video')[0];
	//点击图片弹出轮播大图
    function openWindow(){
        document.getElementById('shadeDiv').style.display='block';
        document.getElementById('layerDiv').style.display='block';
    }
	//关闭轮播大图
    function closeWindow(){
        hideShade();
    }

    var shadeFocus = document.getElementById('shadeDiv');
    shadeFocus.onclick=function(){
        closeWindow();
    };

    function hideShade(){
        document.getElementById('shadeDiv').style.display='none';
        document.getElementById('layerDiv').style.display='none';
    }
    hideShade(); 
</script>

